<template>
  <div class="ranking-box-wrapper">
    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">
          <span class="textcolor_red">
            <h2>今日票房</h2>
          </span>
        </div>
      </div>
      <div class="panel-content">
        <ul class="ranking-wrapper ranking-box">
          <li
            v-for="(item, index) of dailyBoxOfficeData"
            :key="item.m_id"
            :class="getClassName(index)"
          >
            <a href="" v-if="index === 0">
              <div class="ranking-top-left">
                <i class="ranking-top-icon"></i>
                <img
                  class="ranking-img default-img"
                  :src="FirstMovie.url"
                  alt=""
                />
              </div>
              <div class="ranking-top-right">
                <div class="ranking-top-right-main">
                  <span class="ranking-top-moive-name">{{
                    FirstMovie.m_name
                  }}</span>
                  <p class="ranking-top-wish">
                    <span class="stonefont">{{
                      FirstMovie.amount.totalAmount
                    }}</span
                    >{{ FirstMovie.amount.unit }}
                  </p>
                </div>
              </div>
            </a>
            <a v-else href="/films/1443653" target="_blank">
              <span class="normal-link">
                <i class="ranking-index">{{ index + 1 }}</i>
                <span class="ranking-movie-name">{{ item.m_name }}</span>

                <span class="ranking-num-info">
                  <span class="stonefont">{{ item.amount.totalAmount }}</span
                  >{{ item.amount.unit }}
                </span>
              </span>
            </a>
          </li>
          <li class="ranking-item ranking-index-2"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
import { numberFormat } from '@/utils'

export default {
  name: 'TtmsRankbox',

  data () {
    return {}
  },
  computed: {
    ...mapState('home', ['dailyBoxOfficeData']),
    // 榜首
    FirstMovie () {
      return this.dailyBoxOfficeData[0]
    }
  },
  mounted () {
    this.$store.dispatch('home/getDailyBoxOfficeStats')
    this.$nextTick(() => {
      this.getImg()
    })
  },
  watch: {
    dailyBoxOfficeData: {
      immediate: true,
      handler () {
        this.getImg()
      }
    }
  },

  methods: {
    getClassName (index) {
      // 根据排名ranking-index-1
      return `ranking-item ranking-top ranking-index-${index + 1}`
    },
    numberFormat (number) {
      return numberFormat(number)
    },
    getImg () {
      if (this.FirstMovie && this.FirstMovie.url) {
        axios.get('/api/resizeImage', {
          params: {
            imageUrl: 'https://p0.pipi.cn/mmdb/fb738671537c69e5bc02ff9ad5c95aa31a703.jpg?imageView2/1/w/464/h/644',
            width: 120,
            height: 80,
            timestamp: Date.now() // 添加时间戳参数
          },
          responseType: 'blob'
        })
          .then(response => {
            const reader = new FileReader()
            reader.onload = () => {
              this.FirstMovie.url = reader.result
              // 创建一个新的Image对象
              const img = new Image()
              img.onload = () => {
                // 在onload事件中获取图片的尺寸
                console.log('Width:', img.width, 'Height:', img.height)
              }
            }
            reader.readAsDataURL(response.data)
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("@/assets/css/index-item.css");
.ranking-top-right .ranking-top-right-main .ranking-top-wish {
  color: #ef4238;
}
</style>
